<template>
	<view>
		<zy-title rightText="稍后" @right="next(true)" hideBack></zy-title>
		
		<view class="zy-ph-50">
			<view class="zy-register-title" > 有一个真实的头像</view>
			<view class="zy-register-title2" > 会让大家更想认识你？</view>
				
			<view class="zy-row-center zy-mt-100">
				<view class="zy-row-center avatar-c" style="position: relative;" @click="openAvatar">
					<image  class="avatar" :src="picUrl" mode="aspectFill" v-if="picUrl"></image>
					<image style="width: 78rpx;" mode="widthFix" :src="getImageUrl('register_camera.png')" else></image>
				</view>
			</view>
			
			<zy-button style="margin-top: 240rpx;" :content="nextText" @click="next(false)"></zy-button>
			<view style="position: relative; margin-top: 50rpx;">
				<zy-button  hollow content="身份保密" @click="openTip"></zy-button>
				<view class="zy-row-center vip-btn">会员专享</view>
			</view>
		</view>
		
		<uni-popup ref="tip">
			<zy-popup title="身份保密" content="身份保密后，可以用神秘人身份在小世界中进行社交，身份保密功能仅限黑卡会员使用"
			cancelText="暂不办理" confirmText="成为黑卡会员"
			@cancel="cancelTip" @ok="okTip"></zy-popup>
		</uni-popup>
	</view>
</template>

<script>
	import {uploadOSS} from '@/js_sdk/jason-alioss-upload/oss.js'
	import RouteUtil from '@/main/common/RouteUtil.js';
	import CacheUtil from '@/main/common/CacheUtil';
	export default {
		data() {
			return {
				picUrl: '',
				data: {},
				nextText:'选择照片'
			};
		},
		onLoad() {
			this.data = CacheUtil.getRegisterUser();
		},
		methods: {
			openAvatar() {
				const carmeraRegiter = CacheUtil.getCarmeraRegister();
				if (carmeraRegiter) {
					this.uploadOOS()
					return
				}
				uni.showModal({
					content: '拍照功能用于上传头像',
					success: res => {
						if (res.confirm) {
							CacheUtil.setCarmeraRegister()
							this.uploadOOS()
						}
					}
				})
			},
			uploadOOS() {
				uni.chooseImage({
					count: 1,
					crop: {
						width: 400,
						height: 400
					},
					success: (file) => {
						let dir = 'userinfo'
						uploadOSS(dir, file.tempFilePaths[0]).then(res=>{
							this.requestFile(dir, res.fileName, res.picUrl)
						})
					}
				});
			},
			requestFile(pathKey, fileNameKey, picUrl2) {
				let params = {
					pathKey: pathKey,
					userIdKey: uni.getStorageSync('userId'),
					fileNameKey: fileNameKey
				}
				uni.$http.post('/api/ossSts/callBackFiInfo', params).then(res=>{
					this.picUrl = picUrl2;
					this.requestAvatar(res.data, picUrl2)
				})
			},
			requestAvatar(picId, picUrl) {
				uni.$http.updateUser({
					headPicId: picId
				}).then(res => {
					CacheUtil.setUserPic(picUrl)
					this.nextText = '下一步'
				})
			},
			next(isNext){
				if(isNext || this.picUrl != ''){
					RouteUtil.toRegister8()
				}else{
					this.openAvatar()
				}
			},
			openTip() {
				this.$refs.tip.open()
			},
			cancelTip(){
				this.$refs.tip.close()
			},
			okTip(){
				this.$refs.tip.close()
				RouteUtil.toVip()
			},
		}
	};
</script>

<style lang="scss">
	.avatar-c{
		width: 258rpx;
		height: 258rpx;
		background: rgba(#fff, 0.18);
		border-radius: 50%;
		border: 1rpx solid #707070;
	
		.avatar{
			position: absolute;
			top: 0;
			bottom: 0;
			z-index: 99;
			width: 258rpx;
			height: 258rpx;
			border-radius: 50%;
		}
	}
	
	.vip-btn{
		position: absolute;
		top: -30rpx;
		right: -30rpx;
		width: 156rpx;
		height: 52rpx;
		background: linear-gradient(94deg, #FAECBF 0%, #D6B276 100%);
		border-radius: 26rpx 26rpx 26rpx 0rpx;
		
		font-size: 32rpx;
		font-weight: 500;
		color: #222;
		line-height: 32rpx;
	}
	
</style>